<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型</title>

    <style>
        .border-div {
            width: 200px;
            height: 200px;
            background: #ea29ff;
            /*连写*/
            border: 6px solid blue;
            /*单独指定上边框*/
            border-top: 4px dashed yellow;
            /*  border-width: 4px;
              border-style: solid;
              border-color: #00FF00;*/
        }

        /*为表单重新设置边框*/
        input {
            border: 0;
            border-bottom: 1px dashed gray;
        }

        table {
            width: 500px;
            height: 300px;
            /*表格边框*/
            border: 1px solid red;
        }

        td {
            text-align: center;
            /*单元格边框*/
            border: 1px solid red;
        }

        table, td {
            /*合并相邻边框*/
            border-collapse: collapse;
        }

        /*内边距*/
        .nav {
            background-color: #FCFCFC;
            height: 50px;
            border-top: 3px solid #FF8500;
            border-bottom: 1px solid #EDEEF0;
        }

        .nav a {
            display: inline-block;
            height: 50px;
            line-height: 50px;
            text-decoration: none;
            font-size: 12px;
            color: #4c4c4c;
            padding-left: 18px;
            padding-right: 18px;
        }

        .nav a:hover {
            background-color: #edeef0;
            color: #ff8400;
        }

        .father {
            /*盒子大小为300*300*/
            width: 100px;
            height: 100px;
            background-color: #00FF00;
            padding: 100px 100px; /*添加padding后盒子被撑开，所以要减小width 或 height*/

        }

        .son {
            width: 100px;
            height: 100px;
            background-color: #FF8500;

        }

        /*盒子居中*/
        .center-div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /*内容居中：文字、行内元素有效*/
            text-align: center;
            /*盒子居中条件：1.盒子必须制定宽度 2.上下0 左右自动充满 可以实现居中屏幕 auto类似于充满剩余空间*/
            margin: 0 auto;
            /*可以写成以下两种不考虑上下提高点性能*/
            /*margin-left: auto;
            margin-right: auto;*/
        }


        /*内外边距合并问题*/
        .size1 {
            width: 200px;
            height: 200px;
            background-color: #ff8400;
            /*解决外边距塌陷问题*/
            /*方式一：添加边框但是增大了盒子大小*/
            /*border-top: 1px solid #ff8400;*/
            /*方式二：添加padding但是增大了盒子大小*/
            /*padding-top: 1px;*/
            /*方式三：隐藏溢出*/
            overflow: hidden;
        }

        .size2 {
            width: 100px;
            height: 100px;
            background-color: #00FF00;
            /*子元素的margin-top会带着父元素一起下移*/
            margin-top: 40px;
        }

        /*盒子圆角矩形*/
        .circle {
            margin: 15px;
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: pink;
            /*css3属性，存在兼容性*/
            /*当满足宽高相同，圆角为宽度一半时就是一个圆*/
            /*除了写具体数值，可以写成50%*/
            border-radius: 100px;
        }

        /*盒子阴影*/
        .shadow {
            margin: 15px;
            width: 200px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            background-color: pink;
            /*水平距离 垂直距离 阴影模糊程度 阴影大小 阴影颜色*/
            box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.1);
        }

    </style>
</head>
<body>

<h2>盒子模型</h2>

<h3>盒子阴影</h3>
<div class="shadow">
    盒子阴影
</div>

<h3>盒子边框圆角</h3>
<div class="circle">
    圆角矩形
</div>

<h3>盒子内外边距合并</h3>
<!--让盒子文字居中的最优方案：1.盒子有大小时由于padding会撑开盒子所以用margin 2.盒子没有宽度时会继承父亲宽度使用padding也不会撑开内容-->
<!--子div不指定宽度默认继承父亲，而且padding不会撑开盒子，但是指定宽度后再添加padding就会撑开盒子-->
<!--上盒子margin-bottom=10,下盒子margin-top20，最终两个盒子距离为20以大的为主而不是30，浏览器的bug-->
<!--外边距塌陷问题：div嵌套、垂直外边距，子盒子的margin-top会带着父元素一起下移-->
<div class="size1">
    <div class="size2">外边距塌陷问题</div>
</div>

<h3>盒子居中</h3>
<div class="center-div">盒子居中对齐</div>
<h3>边框</h3>
<div class="border-div"></div>
用户名：<input type="text" value="请输入">
<h3>表格细线边框</h3>
<table>
    <tr>
        <td>AAAA</td>
        <td>BBBB</td>
        <td>CCCC</td>
    </tr>
    <tr>
        <td>1111</td>
        <td>2222</td>
        <td>3333</td>
    </tr>
    <tr>
        <td>你</td>
        <td>好</td>
        <td>啊</td>
    </tr>
</table>

<h3>内边距</h3>
<div class="nav">
    <a href="#">设为首页</a>
    <a href="#">手机新浪网</a>
    <a href="#">导航</a>
    <a href="#">收藏</a>
    <a href="#">链接</a>
</div>

<p>padding会撑开有width、height的盒子，一个盒子大小为200*200,但是加上padding会撑开盒子</p>

<div class="father">
    <div class="son"></div>
</div>


</body>
</html>